<template>
	<view>
		<nav-bar :title="$t('充值')" leftIcon="left"></nav-bar>
		<!-- :rightText="$t('充值記錄')" @clickRight="jumpSet" -->
		<view class="contentMain">
			<!-- <image src="../../assets/myCirculation/bjImg.png" class="img"></image> -->
			<view class="imgText">
				<view class="iconText">
					<image src="../../assets/orderDetail/cfp.png" class="icon"></image>
					<view class="moneyName">
						USDT
					</view>
				</view>
				<view class="moneyTypeName">
					{{ $t('鏈類型') }}
				</view>
				<view class="typeList">
					<view :class="index == key ? 'moneyNameKk' : 'moneyNameKk2'" v-for="(item, key) in typeList"
						:key="key" @click="handleType(item.typeName, key)">
						{{ item.typeName }}
					</view>
				</view>
			</view>
		</view>
		<view class="codeMar">
			<view class="backBox">
				<!-- <image src="../../assets/myCirculation/icon.png" class="codeImg"></image> -->
				<!-- <qrcode-vue :value="flowList.urlCFP" size="240" level="H" class="CodeQr" :margin="2" /> -->
				<!-- #ifdef H5 -->
				<qrcode-vue :value="flowList.usdtAddress" size="180" level="H" class="CodeQr" :margin="2" />
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<canvas class="code-item" canvas-id="qrcode"
					style="height: 500rpx;width: 500rpx;margin-left: -20rpx;" />
				<!-- #endif -->
			</view>
		</view>

		<view class="text">
			{{ $t('接收地址') }}
		</view>
		<view class="textLang">
			{{ flowList.usdtAddress }}
		</view>
		<view class="tishi">
			{{$t('僅支持對該地址充值Tron(TRC20)的USDT，請勿充值其他鏈的USDT或者其他幣種')}}
		</view>
		<view class="btn" @click="copy">
			{{ $t('複製USDT地址') }}
		</view>
	</view>
</template>

<script setup>
	// import QrcodeVue from 'qrcode.vue'
	import getInviteFriends from '@/hooks/inviteFriends.js'
	import i18n from '@/locale/index'
	import wxcode from 'uniapp-qrcode'
	import QrcodeVue from 'qrcode.vue'
	import {
		onBeforeUpdate,
		onMounted,
		ref
	} from "vue";
	// import wxcode from 'uniapp-qrcode'

	// wxcode.barcode('barcode', flowList.value.urlCFP, 680, 200);
	// wxcode.qrcode('qrcode', flowList.value.urlCFP, 420, 420);
	const inputDialog = ref()
	const index = ref(0)
	const {
		getMyInviteFriends
	} = getInviteFriends()
	const typeList = ref([{
			index: 0,
			typeName: 'TRC20'
		},
		// {
		// 	index: 1,
		// 	typeName: 'ERC20'
		// }
	])
	const typeName = ref('TRC20')
	const flowList = ref({
		usdtAddress: '',
		usdtSecretKey: ''
	})

	const handleType = (e, a) => {
		index.value = a
		typeName.value = e
		getLIst()
	}
	const getLIst = async () => {
		let ids = {
			userId: uni.getStorageSync('setUserInfo').userId,
			usdtType: typeName.value
		}
		const data = await getMyInviteFriends('usdt/userAddresUsdt', ids)
		flowList.value = data
	}
	// 获取cfp字符串
	getLIst()
	const jumpSet = () => {
		uni.navigateTo({
			url: "/pages/rechaRecharge/rechaRecharge"
		})
	}
	//复制方法
	const copy = () => {
		uni.setClipboardData({
			data: flowList.value.usdtAddress,
			success: function() {
				uni.showToast({
					title: `${i18n.global.t('複製成功')}`,
					duration: 1000
				})
			}
		})
	}

	function qrFun(text) {
		wxcode.qrcode('qrcode', text, 500, 500);
	}
	onBeforeUpdate(() => {
		// #ifdef APP-PLUS
		qrFun(flowList.value.usdtAddress)
		// #endif
	})
</script>

<style lang="scss" scoped>
	.typeList {
		display: flex;
		align-items: center;
	}

	.btn {
		width: 640rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #039BDA, #0DF2ED);
		border-radius: 50rpx;
		margin: 0 auto;
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-top: 65rpx;
	}

	.text {
		margin-top: 35rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 50rpx;
	}

	.textLang {
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.tishi {
		padding: 0 30rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		margin-top: 10rpx;
		text-align: center;
	}

	.codeMar {

		.backBox {
			margin: 0 auto;
			width: 450rpx;
			height: 450rpx;
			background-color: #FFF3E8;
			border-radius: 25rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.codeImg {
				width: 230rpx;
				height: 230rpx;
			}
		}
	}

	.contentMain {
		padding: 30rpx;

		.img {
			width: 100%;
			height: 270rpx;
		}

		.imgText {
			width: 100%;
			padding: 25rpx;


			.iconText {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;

				.moneyName {
					font-size: 30rpx;
					margin-left: 15rpx;
					color: #FFFFFF;
				}

				.icon {
					width: 60rpx;
					height: 60rpx;
					display: block;
				}
			}

			.moneyNameKk2 {
				width: 180rpx;
				height: 60rpx;
				background: #b3b3b3;
				border-radius: 10rpx;
				text-align: center;
				line-height: 60rpx;
				margin-right: 25rpx;
			}

			.moneyNameKk {
				width: 180rpx;
				height: 60rpx;
				background: linear-gradient(90deg, #039BDA, #0DF2ED);
				border-radius: 10rpx;
				text-align: center;
				line-height: 60rpx;
				margin-right: 25rpx;
			}

			.moneyTypeName {
				font-size: 22rpx;
				color: #848686;
				line-height: 50rpx;
			}
		}
	}
</style>